﻿(function ($) {
    $.widget("lordjs.customChartWidget", {
        // default options
        options: {
            containerId: null,
            title: null,
            yTitle: null,
            categories: [],
            series: [],
            chartType: null,
            tableLeft: null,
            tableBottom: null,
            tableWidth: null

            // callbacks
        },

        // the constructor
        _create: function () {
            var that = this;
            ZEUS.DEBUG.log('Container Id: ' + that.options.containerId);
            ZEUS.DEBUG.log('Title: ' + that.options.title);
            ZEUS.DEBUG.log('Categories: ' + that.options.categories);
            that.drawChart();
        },

        _initChartOptions: function () {
            var that = this;

            var options = {
                chart: {
                    spacingLeft: 5,
                    spacingRight: 85,
                    renderTo: that.options.containerId,
                    defaultSeriesType: that.options.chartType,
                    marginBottom: 140,
                    events: {
                        load: function () {
                            //debugger;
                            var ren = this.renderer,
                        pathAttr = {
                            'stroke-width': 1,
                            stroke: '#1e1e1e'
                        },
						cellPadding = 2.5,
                        tableLeft = that.options.tableLeft,
                        tableBottom = that.options.tableBottom,
						categories = this.xAxis[0].userOptions.categories,
                        columnCount = categories.length,
                        columnWidth = that.options.tableWidth / columnCount,
                        rowCount = this.series.length + 1,
                        rowHeight = 20;

                            ren.path(['M', 10, tableBottom - rowHeight * rowCount, 'L', 10, tableBottom])
                            .attr(pathAttr)
                            .add();

                            ren.path(['M', tableLeft, tableBottom - rowHeight * rowCount, 'L', tableLeft, tableBottom])
                            .attr(pathAttr)
                            .add();

                            for (var c = 0; c < columnCount; c++) {
                                ren.path(['M', tableLeft + columnWidth * (c + 1), tableBottom - rowHeight * rowCount, 'L', tableLeft + columnWidth * (c + 1), tableBottom])
                            .attr(pathAttr)
                            .add();

                                // Apply the cell text
                                ren.text(
								categories[c],
								tableLeft + columnWidth * (c + 0.5) - cellPadding,
								tableBottom - rowHeight * (rowCount - 1) - cellPadding * 2
							)
							.attr({
							    align: 'center'
							})
							.css({
							    fontWeight: 'bold'
							})
							.add();

                                for (var r = 0; r < rowCount - 1; r++) {
                                    ren.text(
								this.series[r].data[c] ? this.series[r].data[c].y : null,
								tableLeft + columnWidth * (c + 0.5) - cellPadding,
								tableBottom - rowHeight * (rowCount - 2 - r) - cellPadding * 2
							)
							.attr({
							    align: 'center'
							})
							.css({
							    fontSize: '10px'
							})
							.add();
                                }
                            }

                            for (var r = 0; r <= rowCount; r++) {
                                ren.path(['M', 10, tableBottom - rowHeight * r, 'L', tableLeft + columnWidth * columnCount, tableBottom - rowHeight * r])
                            .attr(pathAttr)
                            .add();
                            }
                        }
                    }
                },

                //colors: that.columnColors,

                plotOptions: {
                    series: {
                        marker: {
                            states: {
                                hover: {
                                    fillColor: '#FFFFFF',
                                    lineColor: '#800000',
                                    lineWidth: 3
                                }
                            }
                        }
                    },
                    column: {
                        borderColor: '#1e1e1e'
                    }
                },
                title: {
                    text: that.options.title
                },
                legend: {
                    borderWidth: 0,
                    layout: 'vertical',
                    align: 'left',
                    itemMarginBottom: 2,
                    itemMarginTop: 2,
                    x: 0,
                    floating: true,
                    itemStyle: {
                        cursor: 'normal'
                    }
                },
                xAxis: {
                    categories: that.options.categories
                },
                yAxis: {
                    title: {
                        text: that.options.yTitle
                    }
                },
                series: that.options.series

            };

            return options;
        },

        drawChart: function () {
            var that = this;
            that.charOptions = that._initChartOptions();
            var chart = new Highcharts.Chart(that.charOptions);
        }
    });
})(jQuery)
